<template>
  <div class="container">
    <el-container>
      <!-- 侧边菜单navMenu部分 -->
      <el-aside width="">
        <h1 class="logo"
            style="height: 60px"></h1>
        <el-menu :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 :router="true"
                 @open="handleOpen"
                 @close="handleClose"
                 :collapse="isCollapse">
          <!-- <qf-sub-menu :sideMenu="$store.state.sideMenu"></qf-sub-menu> -->
          <sub-menu :sideMenu="$store.state.sideMenu"></sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 顶部header部分 -->
        <el-header>
          <el-row type="flex"
                  class="row-bg"
                  justify="space-between">
            <el-col :span="6">
              <div class="icon">
                <!-- el-icon-s-unfold -->
                <i :class="isCollapse ? 'el-icon-s-unfold ' : 'el-icon-s-fold'"
                   @click="isCollapse = !isCollapse"></i>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">万锋管理系统</div>
            </el-col>
            <el-col :span="6">
              <b class="grid-content bg-purple">请登入</b>
              <b class="quit">
                <a href="#"
                   @click="quit">退出</a>
              </b>
            </el-col>
          </el-row>
        </el-header>
        <!-- 主体内容部分 -->
        <el-main>
          <div class="beardCrum">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="item in $store.state.breadCrumb"
                                  :to="{ name: item.name }">{{ item.meta.name }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import { getlog } from "@/api";
  import subMenu from "@/components/subMenu";
  // console.log(subMenu);
  export default {
    components: {
      subMenu,
    },
    data() {
      return {
        isCollapse: false,
      };
    },
    methods: {
      quit(e) {
        e.preventDefault(); //阻止a标签默认事件
        //退出登入
        //1.跳转到登入页
        this.$router.push("/login");
        //2.清空token
        localStorage.removeItem("yf-token");
        //3.刷新页面 目的:因为addRoutes之后,数据编译无法清空,会导致不同角色菜单混乱
        location.reload();
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
    },
    beforeCreate() {
      getlog().then((res) => {
        // console.log(res);
      });
    },
  };
</script>
<style scoped>
  .container >>> .icon {
    cursor: pointer;
    text-align: left;
    font-size: 40px;
  }
  .beardCrum {
    margin:10px
  }
  .container >>> .el-menu-item,
  .container >>> .el-submenu__title {
    color: #4e5bf8;
    /* font-weight: bolder; */
    text-align: left;
  }

 
  .container >>> .el-menu-item.is-active {
    color: #e47833;
  }
  .container >>> .logo {
    background-color: linear-gradient(135deg, #4c67ff, #5635df);

    background-image: url("../../assets/imgs/logo.png");
    background-repeat: no-repeat;
    background-position:25% 50%;
    background-size: 90%;
  }
  .container >>> .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .container >>> .el-header,
  .container >>> .el-footer {
    background: linear-gradient(135deg, #4c67ff, #5635df);
    color: #fff;
    text-align: center;
    line-height: 60px;
    font-weight: bolder;
  }

  .container >>> .el-aside {
    background: linear-gradient(135deg, #5635df, #4c67ff);
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .container >>> .el-main {
    background-color: #f9f9f9;
    color: #333;
    text-align: center;
    padding: 10px;
    /* line-height: 160px; */
  }

  .container >>> .el-container {
    margin-bottom: 40px;
    height: 100%;
  }

  .container >>> .el-container:nth-child(5) .el-aside,
  .container >>> .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .container >>> .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
